<template>
  <Dialog :appDialog="appDialog">
    <div class="gc-header">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <div class="form-item-wrap">
          <el-form-item label="群聊名称">
            <el-input v-model="formInline.group_name" placeholder="请输入群名称搜索"></el-input>
          </el-form-item>
          <el-form-item label="选择群主">
            <el-input v-model="formInline.group_leader" placeholder="请输入群主/创建人"></el-input>
          </el-form-item>
        </div>
        <div class="btn-wrap">
          <el-button type="primary" @click="fetch">查询</el-button>
          <el-button @click="onClear">清空</el-button>
        </div>
      </el-form>
    </div>
    <el-table ref="groupTable" :data="tableData" style="width: 100%" height="500" header-row-class-name="table_header_title" :class="{ 'hide_all': single }" @select-all="selectAll" @select="selectGroup">
      <el-table-column type="selection" width="55" />
      <el-table-column label="群名称" prop="picture">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img width="36" height="36" style="border-radius: 4px" src="@/assets/customer/group_avatar.png" alt="" />
            <span style="margin-left: 10px; font-size: 14px; color: #33302d">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="manager" label="群主" width="250">
        <template #default="scope">
          <div v-if="scope.row.manager.name">
            <span v-if="scope.row.manager.name"> {{ scope.row.manager.name }}/</span>
            <span v-else>-/</span>
            <span v-for="(item, index) in scope.row.manager.department_name" :key="index">{{ item.name ? item.name : '-' }}</span>
          </div>
          <div v-else>暂无</div>
        </template>
      </el-table-column>
      <el-table-column prop="work_wx_members_num" label="群成员"> </el-table-column>
      <el-table-column prop="create_type_text" label="创建方式"> </el-table-column>
      <el-table-column label="创建时间" width="200">
        <template #default="scope">
          <span>
            {{ DFormat(Date.parse(scope.row.created_at), 'yyyy-MM-dd hh:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ '暂无数据' }}</div>
      </template>
    </el-table>
    <ZWPagination ref="ZWPaginationRef" @submit="fetch" />
  </Dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, nextTick, onMounted, watchEffect } from 'vue'
  import { ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import ZWPagination from '@/components/ZWPagination.vue'
  import { getGroupManageList } from '@/api/groupManageList'
  import { DFormat } from '@/utils/utils'
  import { useStore } from '@/store'
  const store = useStore()
  const emits = defineEmits(['submit'])
  const ZWPaginationRef = ref(null)
  const groupTable = ref(null)
  const tableData = ref([])
  const selected = ref([])
  const single = ref(false) // 单选
  const departVisble = ref(false)
  const formInline = reactive({
    is_qw_group: 1,
    group_leader: '',
    group_name: ''
  })
  // 清空查询表单
  const onClear = () => {
    formInline.group_leader = ''
    formInline.group_name = ''
    Init()
  }
  // 查询列表数据
  const fetch = (data?: any) => {
    getGroupManageList({
      page: data?.page || 1,
      page_size: data?.page_size || 15,
      ...formInline
    }).then((res: any) => {
      tableData.value = res.data
      store.dispatch('pageTotal', res.total)
    })
  }
  const Init = () => {
    nextTick(() => {
      fetch()
      ZWPaginationRef.value.pageInit()
    })
  }
  // table 表单的全选
  const selectAll = (row: any) => {
    selected.value = row
  }
  // 选择群聊
  const selectGroup = (val: any, row: any) => {
    if (single.value) {
      groupTable.value.clearSelection()
      groupTable.value.toggleRowSelection(row, true)
      selected.value = row
    } else {
      selected.value = val
    }
  }
  // 取消
  const cancelHandel = () => {
    formInline.group_leader = ''
    formInline.group_name = ''
    appDialog.visible = false
    selected.value = []
  }
  //确定
  const submitHandel = () => {
    emits('submit', selected.value)
    cancelHandel()
  }
  const appDialog = reactive({
    visible: false,
    title: '选择群聊',
    width: '1200px',
    append: true,
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
  })
  watch(()=>appDialog.visible,(val)=>{
    if (val) Init()
  })
  defineExpose({
    appDialog,
    single
  })
</script>
<style scoped lang="scss">
  :deep .table_header_title {
    height: 60px;
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }
  .hide_all {
    :deep .el-table__header-wrapper {
      thead .table_header_title .el-checkbox {
        display: none;
      }
    }
  }
  .gc-header {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    .form-inline {
      display: flex;
      justify-content: space-between;

      .el-form-item {
        margin-bottom: 0;
        padding: 18px 18px;
      }

      display: flex;
      align-items: center;
    }
  }
  .emty_img {
    margin-top: 50px;
    transform: translateX(15%);
  }
  .emty_title {
    margin-top: -50px;
  }
</style>
